<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-3.1.1.min.js"></script>
    <script src="/js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>

<div id="myApp">
    <el-form :inline="true"  class="demo-form-inline">
        <el-form-item label="员工姓名">
            <el-input  v-model="parameterQuery.employeeName" placeholder="员工姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别">
            <el-select v-model="parameterQuery.employeeGender" placeholder="员工性别">
                <el-option label="全部" value=""></el-option>
                <el-option label="男" value="0"></el-option>
                <el-option label="女" value="1"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="queryData" icon="el-icon-search">查询</el-button>
            <el-button type="primary" @click="addPage" icon="el-icon-plus" v-if="employeeRole==1" >新增</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="list" style="width: 100%">
        <el-table-column label="编号" prop="employeeId"></el-table-column>
        <el-table-column label="姓名" prop="employeeName"></el-table-column>
        <el-table-column label="性别" prop="employeeGender">
            <template slot-scope="y">
                <el-tag type="danger" v-if="y.row.employeeGender==0">男</el-tag>
                <el-tag v-if="y.row.employeeGender==1">女</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="出生日期" prop="employeeBirth"></el-table-column>
        <el-table-column label="联系电话" prop="employeePhone"></el-table-column>
        <el-table-column label="邮箱地址" prop="employeeEmail"></el-table-column>
        <el-table-column label="学历" prop="employeeEducation"></el-table-column>
        <el-table-column label="部门" prop="employeeDepartment"></el-table-column>
        <el-table-column label="职务" prop="employeePosition"></el-table-column>
        <el-table-column label="角色" >
            <template  slot-scope="x">
                <el-tag v-if="x.row.employeeRole==0">普通职员</el-tag>
                <el-tag  type="danger" v-if="x.row.employeeRole==1">管理员</el-tag>
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="x">
                <el-button type="primary" icon="el-icon-edit" circle @click="updatePage(x.row)" v-if="employeeRole==1"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="del(x.row)" v-if="employeeRole==1"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="parameterQuery.page"
            :page-sizes="[5, 8, 10, 15]"
            :page-size="parameterQuery.row"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>





    <!--用户新增的对话框-->
    <el-dialog
            title="用户新增"
            :visible.sync="addShow"
            width="30%"
    >
        <el-form ref="form"  label-width="80px">
            <el-form-item label="员工姓名">
                <el-input  v-model="parameter.employeeName"> </el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select  v-model="parameter.employeeGender" placeholder="请选择员工性别">
                    <el-option label="男" value="0"></el-option>
                    <el-option label="女" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="角色">
            <el-input  v-model="parameter.employeeRole"> </el-input>
            </el-form-item>
            <el-form-item label="出生日期">
                <el-input  v-model="parameter.employeeBirth"> </el-input>
            </el-form-item>
            <el-form-item label="联系电话">
                <el-input  v-model="parameter.employeePhone"> </el-input>
            </el-form-item>
            <el-form-item label="邮箱地址">
                <el-input  v-model="parameter.employeeEmail"> </el-input>
            </el-form-item>
            <el-form-item label="学历">
                <el-input  v-model="parameter.employeeEducation"> </el-input>
            </el-form-item>
            <el-form-item label="部门">
                <el-input  v-model="parameter.employeeDepartment"> </el-input>
            </el-form-item>
            <el-form-item label="职务">
                <el-input  v-model="parameter.employeePosition"> </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="add">新增</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <!--用户修改的对话框-->
    <el-dialog
            title="用户修改"
            :visible.sync="updateShow"
            width="30%"
    >
        <el-form ref="form"  label-width="80px">
            <el-form-item label="员工工号">
                <el-input v-model="parameterUpdate.employeeId" disabled></el-input>
            </el-form-item>
            <el-form-item label="员工姓名">
                <el-input v-model="parameterUpdate.employeeName"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="parameterUpdate.employeeGender" placeholder="请选择员工性别">
                    <el-option label="男" value="0"></el-option>
                    <el-option label="女" value="1"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="出生日期">
                <el-input  v-model="parameterUpdate.employeeBirth"> </el-input>
            </el-form-item>
            <el-form-item label="联系电话">
                <el-input  v-model="parameterUpdate.employeePhone"> </el-input>
            </el-form-item>
            <el-form-item label="邮箱地址">
                <el-input  v-model="parameterUpdate.employeeEmail"> </el-input>
            </el-form-item>
            <el-form-item label="学历">
                <el-input  v-model="parameterUpdate.employeeEducation"> </el-input>
            </el-form-item>
            <el-form-item label="部门">
                <el-input  v-model="parameterUpdate.employeeDepartment"> </el-input>
            </el-form-item>
            <el-form-item label="职务">
                <el-input  v-model="parameterUpdate.employeePosition"> </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="update">修改</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
</div>
</body>
<script>
    new Vue({
        el:"#myApp",
        data:{
            parameter:{//新增请求参数对象
                employeeId: "",
                employeeName:"",
                employeeGender:"",
                employeeRole:"",
                employeePhone:"",
                employeeBirth:"",
                employeeEmail:"",
                employeeEducation:"",
                employeeDepartment:"",
                employeePosition:"",
            },
            parameterUpdate:{//修改请求参数对象
                employeeId:"",
                employeeName:"",
                employeeGender:"",
                employeeRole:"",
                employeePhone:"",
                employeeBirth:"",
                employeeEmail:"",
                employeeEducation:"",
                employeeDepartment:"",
                employeePosition:"",
            },
            parameterQuery:{  //查询请求参数
                employeeName:"",
                employeeGender:"",
                page:1,
                row:5

            },
            total:0,//总条数
            list:[],
            addShow:false,//是否显示新增对话框
            updateShow:false,
            employeeRole:""

        },//作用页面的范围
        methods:{
            handleSizeChange(row){
                this.parameterQuery.page= 1;
                this.parameterQuery.row = row;
                this.queryData();
            },
            handleCurrentChange(page){
                this.parameterQuery.page= page;
                this.queryData();


            },


            del(obj) {
                //定义一个确认框
                const self = this;
                this.$confirm("你确定要删除吗", "提示").then(function () {
                    $.ajax({
                        url: "/employee/delete",
                        data: {"id": obj.employeeId},
                        success: function (rs) {
                            if (rs.code == 200) {
                                //关闭对话框
                                self.queryData();
                            } else {
                                //提示
                                self.$alert(rs.msg);
                            }

                        }

                    })
                })
            },

            add(){//新增操作
                const self=this;
                $.ajax({
                    url:"/employee/add",
                    data:this.parameter,
                    success:function (rs){
                        if(rs.code==200){
                            //关闭对话框
                            self.addShow=false;
                            self.queryData();
                        }else{
                            //提示
                            self.$alert(rs.msg);
                        }
                    }
                })
            },
            addPage(){
                //打开新增对话框
                this.addShow=true;
            },
            update() {
                const self = this;
                $.ajax({
                    url: "/employee/update",
                    type: "post",
                    data: JSON.stringify(this.parameterUpdate),
                    contentType: "application/json",
                    success: function (rs) {
                        if (rs.code==200) {
                            //关闭对话框
                            self.updateShow = false;
                            self.queryData();
                        } else {
                            //提示
                            self.$alert(rs.msg);
                        }
                    }
                })
            },
            updatePage(obj){//修改对话狂
                this.parameterUpdate=obj;
                this.updateShow=true;

            },
            queryData(){
                const self=this;
                $.ajax({
                    url:"/employee/search",
                    data:this.parameterQuery,
                    success:function(rs){
                        console.log(rs);
                        if(rs.code==200){
                            self.list=rs.data.list;
                            self.total=rs.data.total;
                        }else{
                            self.$message(rs.msg);
                            self.list=[];
                        }
                    }
                })
            }
        },
        mounted(){
            this.queryData();
            this.employeeRole = sessionStorage.getItem("role");
        }
    })
</script>
</html>